<template>
  <el-form-item label="生成规则">
    <draggable :list="value.rules" :animation="340" group="selectItem" handle=".option-drag">
      <div v-for="(item, index) in value.rules" :key="index" class="select-item">
        <div class="select-line-icon option-drag">
          <i class="el-icon-s-operation" />
        </div>

        <div class="select_content">
          <section v-if="item.type=='constant_string'">
            <el-form-item label="字符常量">
              <el-input v-model="item.constant_string"></el-input>
            </el-form-item>
          </section>

          <section v-if="item.type=='create_date'">
            <el-form-item label="创建日期格式">
              <el-input v-model="item.create_date_format"></el-input>
            </el-form-item>
          </section>

          <section v-if="item.type=='auto_num'">
            <el-form-item label="自增变量">
              位数: <el-input-number controls-position="right" v-model="item.number_of_digit" :min="1"
                :max="10"></el-input-number><BR />
              起始: <el-input-number controls-position="right" v-model="item.begin_num" :min="1"></el-input-number><BR />
              循环: <el-select v-model="item.recount_type" placeholder="请选择">
                <el-option label="不循环" value="no"></el-option>
                <el-option label="每天" value="per_day"></el-option>
                <el-option label="每月" value="per_month"></el-option>
                <el-option label="每年" value="per_year"></el-option>
              </el-select>
            </el-form-item>

          </section>

        </div>



        <div class="close-btn select-line-icon" @click="value.rules.splice(index, 1)">
          <i class="el-icon-remove-outline" />
        </div>
      </div>
    </draggable>
    <div style="margin-left: 20px;">
      <!-- <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addSelectItem">
        添加选项
      </el-button> -->
    </div>

    <el-dropdown trigger="click" @command="addSelectItem">
      <span class="el-dropdown-link">
        添加选项<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="constant_string">字符常量</el-dropdown-item>
        <el-dropdown-item command="create_date">创建日期</el-dropdown-item>
        <el-dropdown-item command="auto_num">自增变量</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

  </el-form-item>


</template>

<script>
  export default {
    props: {
      value: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        sp: {},
        sr: {},
        param: {}
      }
    },
    created(options) {
      let that = this;
      that.xinit();
    },
    methods: {
      xinit() {
        let that = this;
      },
      addSelectItem(command) {
        let that = this;
        that.value.rules.push({
          type: command,
        });
      }
    }
  }
</script>

<style>
  .select_content {
    width: 240px;
  }

  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  .option-drag {
    cursor: move;
  }

  .hidden {
    display: none;
  }


  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
</style>
